<template>
  <div class="app-container" style="background: #FFFFFF;">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">

      <el-form-item label="合同编号" prop="agrId">
        <el-input v-model="queryParams.agrId" placeholder="请输入合同编号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>


      <el-form-item label="合同时间">

        <el-date-picker v-model="dateRange[0]" type="date" value-format="yyyy-MM-dd" placeholder="开始时间">
        </el-date-picker>

      </el-form-item>
      <el-form-item label="">
        <span>至</span>
      </el-form-item>
      <el-form-item label="">
        <el-date-picker v-model="dateRange[1]" type="date" value-format="yyyy-MM-dd" placeholder="结束时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="客户名称" prop="khname">
        <el-input v-model="queryParams.khname" placeholder="请输入客户名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['AgreementMain:agreement:add']" v-if="false">新增</el-button>
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini"
          @click="findkh(1, null, queryParams.pageNum)">添加合同</el-button>
      </el-col> -->
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
          v-if="false" v-hasPermi="['AgreementMain:agreement:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
          v-hasPermi="['AgreementMain:agreement:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['AgreementMain:agreement:export']">导出</el-button>
      </el-col>

      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table border="" v-loading="loading" :data="agreementList" @selection-change="handleSelectionChange"
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }" highlight-current-row class="abc"
      :row-class-name="tableAddClass">
      <el-table-column type="selection" width="55" align="center" />

      <el-table-column label="合同时间" align="center" prop="agrDate" width="100">
        <template slot-scope="scope">
          <div>{{ parseTime(scope.row.agrDate, "{y}-{m}-{d}") }}</div>
        </template>
      </el-table-column>
      <el-table-column label="合同编号" align="center" prop="agrId" width="140px">
        <template slot-scope="scope">
          <div v-if="scope.row.agrId.includes('X')" title="拨款单处生成" style="color: red;cursor:pointer;">{{ scope.row.agrId
            }}</div>
          <div v-else style="color: rgb(114, 175, 228);cursor:pointer;"
            @click="findkh(2, scope.row, queryParams.pageNum)">{{ scope.row.agrId }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="客户名称" align="left" prop="khname">
        <template slot-scope="scope">
          <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" :title="scope.row.khname">
            {{ scope.row.khname }}</div>
        </template>
      </el-table-column>
      <el-table-column label="关联渠道" align="left" prop="gsname">
        <template slot-scope="scope">
          <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" :title="scope.row.gsname">
            {{ scope.row.gsname }}</div>
        </template>
      </el-table-column>
      <el-table-column label="打款金额" align="right" prop="jeDk" />
      <el-table-column label="月返金额" align="center" prop="jeFdsj" v-if="false" />
      <el-table-column label="利润金额" align="center" prop="jeLrsj" v-if="false" />
      <!-- 原先的dkce不用了 -->
      <el-table-column label="分润金额" align="right" prop="outmoney" ></el-table-column>
      <el-table-column label="已结算金额" align="right" prop="" width="100" >
        <template slot-scope="scope">
          <div style=" color: rgb(23, 199, 7);">{{scope.row.jsMoney}}</div>
        </template>
        </el-table-column>
      <el-table-column label="未结算金额" align="right" prop="" width="100">
        <template slot-scope="scope">
          <div style=" color: red;">{{scope.row.noMoney}}</div>
        </template>
      </el-table-column>
      <el-table-column label="业务员" align="center" prop="ywyName" />
      
      <!-- <el-table-column label="关联订单" align="center" prop="flag">
        <template slot-scope="scope">
          <span style="white-space: pre-wrap;">
            <i class="el-icon-success" style=" color: rgb(23, 199, 7); font-size:16px;" v-if="scope.row.flag == '1'"></i>
            <i class="el-icon-error" style=" color: red;font-size:16px;" v-else></i>

          </span>
        </template>
      </el-table-column>
      <el-table-column label="关联拨款" align="center" prop="tzflag">
        <template slot-scope="scope">
          <span style="white-space: pre-wrap;">
            <i class="el-icon-success" style=" color: rgb(23, 199, 7); font-size:16px;"
              v-if="scope.row.tzflag == '1'"></i>
            <i class="el-icon-error" style=" color: red;font-size:16px;" v-else></i>

          </span>
        </template>
      </el-table-column> -->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="160px" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
            v-hasPermi="['AgreementMain:agreement:edit']" v-if="false">修改</el-button>

        
          <i class="el-icon-warning-outline" title="未全部签字" style="margin-right: 10px;color: #e4b52e;" v-else></i>
          <!-- <i class="el-icon-warning-outline" :title="'dd:'+scope.row.bkuserId+'\ndff'+scope.row.bkuserId" style="margin-right: 10px;color: #e4b52e;" v-else></i> -->
          <el-button size="mini" type="text" icon="el-icon-edit" @click="findkh(2, scope.row, queryParams.pageNum)"
           >查看</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click.native.stop="handleDelete(scope.row)"
            v-hasPermi="['AgreementMain:agreement:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :page-sizes="[10, 20, 30, 50, 100]" :total="total" :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize" @pagination="getList" />

    <!-- 添加或修改合同对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="客户id" prop="customerId">
          <el-input v-model="form.customerId" placeholder="请输入客户id" />
        </el-form-item>
        <el-form-item label="所属经销商ID" prop="deaId">
          <el-input v-model="form.deaId" placeholder="请输入所属经销商ID" />
        </el-form-item>
        <el-form-item label="实际归属渠道" prop="realDea">
          <el-input v-model="form.realDea" placeholder="请输入实际归属渠道" />
        </el-form-item>
        <el-form-item label="渠道业务员id" prop="userId">
          <el-input v-model="form.userId" placeholder="请输入渠道业务员id" />
        </el-form-item>
        <el-form-item label="合同时间" prop="agrDate">
          <el-input v-model="form.agrDate" placeholder="请输入合同时间" />
        </el-form-item>
        <el-form-item label="备用" prop="other1">
          <el-input v-model="form.other1" placeholder="请输入备用" />
        </el-form-item>
        <el-form-item label="备用" prop="other2">
          <el-input v-model="form.other2" placeholder="请输入备用" />
        </el-form-item>
        <el-form-item label="备用" prop="other3">
          <el-input v-model="form.other3" placeholder="请输入备用" />
        </el-form-item>
        <el-form-item label="备用" prop="other4">
          <el-input v-model="form.other4" placeholder="请输入备用" />
        </el-form-item>
        <el-form-item label="备用" prop="other5">
          <el-input v-model="form.other5" placeholder="请输入备用" />
        </el-form-item>
        <el-form-item label="打款金额" prop="jeDk">
          <el-input v-model="form.jeDk" placeholder="请输入打款金额" />
        </el-form-item>
        <el-form-item label="拨款金额" prop="jeBk">
          <el-input v-model="form.jeBk" placeholder="请输入拨款金额" />
        </el-form-item>
        <el-form-item label="月返点数" prop="jeFd">
          <el-input v-model="form.jeFd" placeholder="请输入月返点数" />
        </el-form-item>
        <el-form-item label="月实际返点数" prop="jeFdsj">
          <el-input v-model="form.jeFdsj" placeholder="请输入月实际返点数" />
        </el-form-item>
        <el-form-item label="季返点数" prop="jeJfd">
          <el-input v-model="form.jeJfd" placeholder="请输入季返点数" />
        </el-form-item>
        <el-form-item label="季返点实际" prop="jeJfdsj">
          <el-input v-model="form.jeJfdsj" placeholder="请输入季返点实际" />
        </el-form-item>
        <el-form-item label="暂估利润" prop="jeLr">
          <el-input v-model="form.jeLr" placeholder="请输入暂估利润" />
        </el-form-item>
        <el-form-item label="实际利润" prop="jeLrsj">
          <el-input v-model="form.jeLrsj" placeholder="请输入实际利润" />
        </el-form-item>
        <el-form-item label="返客金额" prop="jeFk">
          <el-input v-model="form.jeFk" placeholder="请输入返客金额" />
        </el-form-item>
        <el-form-item label="返渠金额" prop="jeFq">
          <el-input v-model="form.jeFq" placeholder="请输入返渠金额" />
        </el-form-item>
        <el-form-item label="月返比例" prop="jeYfbl">
          <el-input v-model="form.jeYfbl" placeholder="请输入月返比例" />
        </el-form-item>
        <el-form-item label="季返比例" prop="jeJfbl">
          <el-input v-model="form.jeJfbl" placeholder="请输入季返比例" />
        </el-form-item>
        <el-form-item label="年返比例" prop="jeNfbl">
          <el-input v-model="form.jeNfbl" placeholder="请输入年返比例" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 分配渠道弹窗测试 -->
    <el-dialog :title="titleqd" :visible.sync="openqd" width="1000px" append-to-body v-dialogDrag v-if="openqd">
      <el-form :model="queryParamsQd" ref="queryFormQd" size="small" :inline="true" label-width="68px"
        @submit.native.prevent>
        <el-form-item label="渠道名称" prop="deaName">
          <el-input v-model="queryParamsQd.deaName" placeholder="请输入渠道名称" clearable
            @keyup.enter.native="handleQdQuery" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQdQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQueryQd">重置</el-button>

        </el-form-item>
      </el-form>
      <el-form label-width="80px">
        <el-table v-loading="loading" style="overflow: auto; " height="400px" :data="dealerList"
          @selection-change="handleSelectionChangeQd" @row-click="handleClickTableRowB" ref="fileTableB">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="渠道编号" align="center" prop="deaId" />
          <el-table-column label="渠道名称" align="center" prop="deaName" />
          <el-table-column label="帐号" align="center" prop="deaUser" />
        </el-table>
        <pagination v-show="totalqd > 0" :total="totalqd" :page.sync="queryParamsQd.pageNum"
          :limit.sync="queryParamsQd.pageSize" @pagination="getListDea" />
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="qdClick" v-if="sjbtshow">确 定</el-button>
        <el-button type="primary" @click="gsqdClick" v-if="gsbtshow">确 定</el-button>
        <el-button @click="cancelqd">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { listoutAgreementBig ,changeHtStatus} from "@/api/AgreementBig/AgreementBig"
  import { listDealerAll, } from "@/api/DealerMain/dealer";
  export default {
    name: "Agreement",
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 合同表格数据
        agreementList: [],
        // 弹出层标题
        title: "",
        dateRange: [],
        // 是否显示弹出层
        open: false,
        ywyOptions: [],//业务员

        checked: false,


        // 查询参数
        queryParams: {
          agrId: null,
          pageNum: 1,
          pageSize: 20,
          customerId: null,
          deaId: null,
          realDea: null,
          userId: null,
          agrDate: null,
          other1: null,
          other2: null,
          other3: null,
          other4: null,
          other5: null,
          jeDk: null,
          jeBk: null,
          jeFd: null,
          jeFdsj: null,
          jeJfd: null,
          jeJfdsj: null,
          jeLr: null,
          jeLrsj: null,
          jeFk: null,
          jeFq: null,
          jeYfbl: null,
          jeJfbl: null,
          jeNfbl: null,
          khname: null,
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
        },

        //分配渠道相关 渠道变量参数
        openqd: false,
        titleqd: "",
        dealerList: [],
        deid: [],//分配选中的渠道
        dename: [],
        qdval: {//分配时，传值的parm
          realDea: null,
          orderId: null,
        },
        totalqd: 0,

        sjbtshow: false,
        gsbtshow: false,
        // 渠道查询参数
        queryParamsQd: {
          pageNum: 1,
          pageSize: 20,
          Dtype: 2,
          deaName: null,
        },

        form2: {
          customerId: null,
          customerIdHw: null,
          khname: null,//客户员名称
          gsname: null,//归属渠道
          sjname: null,//实际渠道
        },
      };
    },
    created() {
      if (this.$route.query.ys != undefined) {
        var ys = this.$route.query.ys;
        this.queryParams.pageNum = parseInt(ys);
      }
      else
        this.queryParams.pageNum = 0;


      this.getList();
      //绑定业务员
      listuser(this.queryParamsUser).then(response => {
        this.ywyOptions = response.rows;
      });
    },
    methods: {
        /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      // if (this.checked == true)
      //   this.queryParams.other2 = 1;
      // else
      //   this.queryParams.other2 = null;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.checked = true;
      this.handleQuery();
    },
      // 渠道状态修改
      handleStatusChange(row) {
        let text = row.agrType === "0" ? "解锁" : "锁定";
        this.$modal.confirm('确认要"' + text + '""' + row.agrId + '"合同吗？').then(function () {
          return changeHtStatus(row.agrId, row.agrType);
        }).then(() => {
          this.$modal.msgSuccess(text + "成功");
        }).catch(function () {
          row.agrType = row.agrType === "0" ? "1" : "0";
        });
      },
      //保留两位，不足补位
      toFixed(num) {
        return (Math.round(num * 100) / 100).toFixed(2);
      },
      /** 查询合同列表 */
      getList() {
        this.loading = true;
        listoutAgreementBig(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
          this.agreementList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      //跳转到合同页面 - 添加 -修改 传类型参数
      findkh: function (atype, row, pageint) {
        var rid = "";
        if (row != null)
          rid = row.agrId;

        if (this.$store.state.user.userId == 118) {
          this.$router.push(
            {
              path: '/htxg/agreementbight',
              methods: 'post',
              query: {
                atype: atype, //表示添加
                did: null,
                aid: rid,//合同id
                ys: pageint,
                searchparms: JSON.stringify(this.queryParams),
                searchdateRange: JSON.stringify(this.dateRange),
              }
            })
        }
        else {

          let routeData = this.$router.resolve({
            path: '/htxg/agreementbight2', query: {
              atype: atype, did: null, aid: rid, ys: pageint, searchparms: JSON.stringify(this.queryParams), searchdateRange: JSON.stringify(this.dateRange)
            }
          });
          window.open(routeData.href, '_blank');
        }
      },

    },

  };
</script>
<style>
  .el-table th.gutter {
    display: table-cell !important;
    /* 解决表头线未对齐 */
  }
</style>
<style lang="scss">
  // 鼠标经过颜色颜色
  .abc .el-table__body tr:hover>td {
    background-color: #EBF6FF !important;
  }

  //高亮点击事件颜色
  .el-table__body tr.current-row>td {
    background: #EBF6FF !important;
  }
</style>
<!-- /表格颜色 -->
<style scoped>
  .app-container /deep/ .el-table .a {
    color: #13ce66 !important;
  }

  .app-container /deep/ .el-table .b {
    color: #905edf !important;
  }

  .app-container /deep/ .el-table .c {
    color: red !important;
  }

  .app-container /deep/ .el-table .d {
    color: rgb(216, 86, 86) !important;
  }
</style>